html body {
  color: #000000;
  position: relative;
  overflow: hidden;
  background-color: transparent;

  div {
    box-sizing: border-box;
  }

  #app {
    position: relative;
    height: 99.8%;
  }

  .modal-box {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    height: 100%;
    z-index: 1000;
    &.modal-active {
      display: block;
    }
    .modal-content {
      width: 520px;
      position: relative;
      top: 28%;
      margin: 0 auto;
      background: #fff;
      border: 1px solid #1883d7;
    }
    .modal-title,
    .modal-footer {
      padding: 5px;
      background: #f0f0f0;
    }
    .modal-footer {
      text-align: right;
    }
    .modal-body {
      background: #fff;
    }
    .modal-cancel,
    .modal-save {
      display: inline-block;
      min-width: 88px;
      padding: 0 15px;
      height: 28px;
      line-height: 24px;
      background: #f0f0f0;
      background: #e1e1e1;
      text-align: center;
      cursor: pointer;
      position: relative;
    }

    .modal-cancel {
      border: #ff3c39 2px solid;
    }

    .modal-save {
      border: #0078d7 2px solid;
    }

    .modal-cancel > span,
    .modal-save > span {
      position: relative;
    }
  }

  .el-popper {
    user-select: none;
    &.trade-pop {
      margin-top: 2px;
      padding: 0;
      border-radius: 0;

      .overview {
        background-color: rgba(242, 242, 242, 1);
        padding: 6px 5px;

        .ove-list {
          width: 100%;
          background-color: #ffffff;
          padding: 6px;
          padding-top: 8px;
          list-style: none;

          .ove-item {
            line-height: 24px;
            color: #000000;
            padding-left: 3px;
            display: flex;
            font-size: 0.88em;

            &.line {
              border-bottom: 1px solid #b1bbc0;
              margin-bottom: 6px;
            }

            &.cur {
              cursor: pointer;
            }

            .label {
              flex: 1;

              &.noselect {
                user-select: none;
              }
            }

            .content {
              width: 86px;
              position: relative;
              padding-right: 10px;

              &.tright {
                text-align: right;
              }

              &.rmb::after {
                content: '￥';
                position: absolute;
                top: 0;
                right: -2px;
                font-size: 1.1em;
              }

              &.usd::after {
                content: '$';
                position: absolute;
                top: 0;
                right: -2px;
                font-size: 1.1em;
              }
            }

            .right-icon {
              position: relative;
              font-size: 1.3em;
              top: 2px;
            }
          }
        }
      }

      .popper__arrow {
        display: none;
      }
    }

    &.el-select-dropdown {
      .el-select-dropdown__list {
        .el-select-dropdown__item {
          font-size: 12px;
          height: 24px;
          line-height: 24px;
        }
      }
    }
  }

  // dialog 自定义样式
  .el-dialog__wrapper {
    .el-dialog {
      // dialog中的input修改
      .ivu-input-wrapper {
        .ivu-input {
          border: 1px solid #99999a;
        }
      }

      .ivu-select {
        .ivu-select-selection {
          border: 1px solid #99999a;
        }
      }

      // 弹出提示样
      &.tips-alert {
        // .el-dialog__header {}

        .el-dialog__body {
          .dialog-content {
            display: flex;
            justify-items: center;
            align-items: center;

            .dialog-icon {
              margin-right: 6px;
            }
          }
        }

        .el-dialog__footer {
          .dialog-footer {
            .confirm-btn {
              position: relative;
              display: inline-block;
              width: 88px;
              height: 28px;
              line-height: 24px;
              background: #f0f0f0;
              border: #0078d7 2px solid;
              text-align: center;
              cursor: pointer;

              span {
                position: relative;
              }

              &.btn-cancel {
                border-color: #cecece;
                line-height: 26px;
                border-width: 1px;

                &::before {
                  border: 1px solid #0078d7;
                }
              }

              &::before {
                position: absolute;
                content: '';
                left: -1px;
                top: -1px;
                bottom: -1px;
                right: -1px;
                background-color: #e5f1fb;
                transition: opacity 0.5s;
                opacity: 0;
              }

              &:hover:before {
                opacity: 1;
              }
            }
          }
        }
      }

      // 止盈止损设置dialog样式
      &.full-stop {
        .el-dialog__header {
          padding: 0;

          .dialog-title {
            color: #666;
            font-weight: bold;
            height: 36px;
            line-height: 36px;
            padding: 0 5px 0 14px;
            background: #d0d0d0;
            font-size: 14px;
          }

          .el-dialog__headerbtn {
            top: 7px;
            font-size: 18px;
          }
        }

        .el-dialog__body {
          .dialog-content {
            .fontbold {
              width: 100%;
              border-bottom: 1px solid #ccc;
              padding-bottom: 13px;
              padding-left: 9px;
              font-weight: bold;
              display: flex;
              align-items: center;

              > span {
                margin-right: 10px;
              }

              .quantity-block {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                user-select: none;
                margin-right: 10px;

                .label {
                  width: 50px;
                  line-height: 32px;
                  margin-right: 5px;
                  text-align: justify;
                  text-align-last: justify;
                }

                .content {
                  flex: 1;
                  display: flex;
                  border-radius: 4px;

                  .content-input {
                    width: 48px;
                    border: 1px solid #99999a;
                    margin-right: none;
                    font-size: 12px;
                    height: 32px;
                    line-height: 12px;
                    padding: 0px 10px;
                    box-sizing: border-box;
                  }
                }

                .num-btn {
                  border: 1px solid #99999a;
                  width: 22px;
                  height: 32px;
                  display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  overflow: hidden;
                  border-left: none;
                  border-radius: 0 4px 4px 0;

                  .btn {
                    background-color: #b7cffb;
                    flex: 1;
                    width: 22px;
                    margin: 0;
                    cursor: pointer;

                    &.up {
                      background-image: url('./assets/img/option.png');
                      background-repeat: no-repeat;
                      background-position: 6px 4px;
                    }

                    &.down {
                      background-image: url('./assets/img/option.png');
                      background-repeat: no-repeat;
                      background-position: 6px -12px;
                    }
                  }
                }
              }
            }

            .setting-form {
              border-bottom: 1px solid rgb(204, 204, 204);
              padding: 16px 0px;

              .form-item {
                width: 100%;
                position: relative;
                min-height: 26px;
                margin-top: 10px;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;

                .input-block {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: nowrap;
                  user-select: none;

                  .label {
                    width: 50px;
                    line-height: 32px;
                    color: #0f0f0f;
                    font-size: 12px;
                    margin-right: 5px;
                    text-align: justify;
                    text-align-last: justify;
                  }

                  .content {
                    flex: 1;
                    display: flex;
                    border-radius: 4px;

                    .content-input {
                      flex: 1;
                      border: 1px solid #99999a;
                      margin-right: none;
                      font-size: 12px;
                      height: 32px;
                      line-height: 12px;
                      padding: 0px 10px;
                      box-sizing: border-box;
                    }
                  }

                  .num-btn {
                    border: 1px solid #99999a;
                    width: 22px;
                    height: 32px;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    overflow: hidden;
                    border-left: none;
                    border-radius: 0 4px 4px 0;

                    .btn {
                      background-color: #b7cffb;
                      flex: 1;
                      width: 22px;
                      margin: 0;
                      cursor: pointer;

                      &.up {
                        background-image: url('./assets/img/option.png');
                        background-repeat: no-repeat;
                        background-position: 6px 4px;
                      }

                      &.down {
                        background-image: url('./assets/img/option.png');
                        background-repeat: no-repeat;
                        background-position: 6px -12px;
                      }
                    }
                  }
                }
              }

              .error-msg {
                font-size: 14px;
                line-height: 32px;
                color: #ef4242;
              }
            }

            .condi-type {
              position: relative;
              margin-top: 16px;
              padding-left: 26px;
              padding-top: 1px;
              display: flex;

              .condi-name {
                width: 94px;
                color: #696969;
                text-align: right;
              }
            }
          }
        }

        .el-dialog__footer {
          .dialog-footer {
            padding: 0 8px 8px;
            text-align: right;
            position: relative;

            .delete {
              position: absolute;
              top: -1;
              left: 14px;
              width: 72px;
              height: 22px;
              border: 0;
              background: url('./assets/img/btn-cancle.png') no-repeat center;

              &:hover {
                background-image: url('./assets/img/btn-cancle-hover.png');
              }
            }

            .save {
              display: inline-block;
              width: 72px;
              height: 22px;
              border: 0;
              background: url('./assets/img/btn-save.png') no-repeat center;

              &:hover {
                background-image: url('./assets/img/btn-save-hover.png');
              }
            }

            .cancle {
              display: inline-block;
              width: 72px;
              height: 22px;
              border: 0;
              background: url('./assets/img/btn-cancle.png') no-repeat center;

              &:hover {
                background-image: url('./assets/img/btn-cancle-hover.png');
              }
            }
          }
        }
      }

      // 跟单系统dialog弹窗样式
      &.documentary-dialog {
        .el-dialog__body {
          .content-form {
            .ivu-form {
              width: 92%;
              margin: 0 auto;

              .ivu-form-item {
                .ivu-form-item-label {
                  text-align: justify;
                  text-align-last: justify;
                }

                .ivu-select .ivu-select-dropdown-list .ivu-select-item:hover {
                  background: #57a3f3;
                  color: #fff;
                }
              }
            }
          }

          .content-table {
            height: 40vh;

            .dTable {
              border: none;
              width: 100%;
              height: 100%;
              position: relative;
              white-space: nowrap;
              overflow-x: auto;
              border: 1px solid #b1bbc0;

              thead {
                width: calc(100% - 1.4em);
                top: 0;
                height: 22px;
                left: 0;
                background: #fff;
                display: table;
                table-layout: fixed;
                font-size: 12px;
                font-weight: normal;
                text-align: left;

                tr {
                  display: table;
                  width: 100%;
                  table-layout: fixed;

                  th {
                    text-align: center;
                    border-right: 1px solid #b1bbc0;
                    border-bottom: 1px solid #b1bbc0;
                    padding: 0 2px;
                    font-size: 12px;
                    line-height: 32px;
                    height: 32px;
                    font-weight: normal;
                    overflow: hidden;

                    &:last-child {
                      border-right: none;
                    }
                  }
                }
              }

              tbody {
                height: calc(100% - 22px);
                box-sizing: border-box;
                display: block;
                overflow-y: scroll;
                color: #000000;

                tr {
                  display: table;
                  width: 100%;
                  table-layout: fixed;

                  td {
                    text-align: center;
                    border: none;
                    padding: 0 2px;
                    font-size: 12px;
                    line-height: 22px;
                    height: 22px;
                    font-weight: normal;
                    overflow: hidden;

                    .pricerise {
                      color: #ff3c39;
                    }

                    .pricefall {
                      color: #00e700;
                    }
                  }

                  &.noneInfo {
                    text-align: center;
                    font-size: 12px;
                    color: #808080;
                    padding: 6px 0;
                  }

                  &.active {
                    background-color: #0078d7;
                    color: #fff;
                  }

                  &.statistics {
                    td {
                      line-height: 82px;
                    }
                  }
                }
              }

              .tobdy-box {
                height: calc(100% - 22px);
                width: 100%;
                overflow-y: scroll;

                tbody {
                  height: auto;
                  overflow: auto;
                }
              }
            }
          }
        }

        .el-dialog__footer {
          .dialog-footer {
            .confirm-btn {
              position: relative;
              display: inline-block;
              width: 88px;
              height: 28px;
              line-height: 24px;
              background: #f0f0f0;
              border: #0078d7 2px solid;
              text-align: center;
              cursor: pointer;

              span {
                position: relative;
              }

              &.btn-cancel {
                border-color: #cecece;
                line-height: 26px;
                border-width: 1px;

                &::before {
                  border: 1px solid #0078d7;
                }
              }

              &::before {
                position: absolute;
                content: '';
                left: -1px;
                top: -1px;
                bottom: -1px;
                right: -1px;
                background-color: #e5f1fb;
                transition: opacity 0.5s;
                opacity: 0;
              }

              &:hover:before {
                opacity: 1;
              }
            }
          }
        }
      }

      &.dialog-notification {
        background: #f0f0f0;

        .el-dialog__header {
          font-size: 16px;
          background-color: #20283b;
          color: #ffffff;
        }

        .el-dialog__body {
          height: 62vh;
          padding: 0;

          .dialog-content {
            width: 100%;
            height: 100%;
          }
        }

        .el-dialog__footer {
          .dialog-footer {
            .confirm-btn {
              position: relative;
              display: inline-block;
              width: 88px;
              height: 28px;
              line-height: 24px;
              background: #f0f0f0;
              border: #0078d7 2px solid;
              text-align: center;
              cursor: pointer;

              span {
                position: relative;
              }

              &.btn-cancel {
                border-color: #cecece;
                line-height: 26px;
                border-width: 1px;

                &::before {
                  border: 1px solid #0078d7;
                }
              }

              &::before {
                position: absolute;
                content: '';
                left: -1px;
                top: -1px;
                bottom: -1px;
                right: -1px;
                background-color: #e5f1fb;
                transition: opacity 0.5s;
                opacity: 0;
              }

              &:hover:before {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }

  // 交易面板公共样式
  .quotation-content {
    // 修改input select默认样式
    .ivu-input-wrapper {
      .ivu-input {
        border: 1px solid #99999a;

        &:hover {
          border-color: #57a3f3;
        }
      }

      &.price-input {
        .ivu-input {
          border-radius: 4px 0 0 4px;
        }
      }
    }

    .ivu-select {
      .ivu-select-selection {
        border: 1px solid #99999a;

        &:hover {
          border-color: #57a3f3;
        }
      }
    }

    .ivu-form {
      .ivu-form-item {
        .ivu-form-item-label {
          text-align: justify;
          text-align-last: justify;
        }
      }

      .order-item.ivu-form-item {
        display: flex;
        margin-bottom: 14px;
				.pricetipbox{
					display: flex;
					align-items: flex-end;
					.tipbox1{
						flex: 1;
					}
				}
        .ivu-form-item-label {
          width: 70px;
          text-align: justify;
          text-align-last: justify;
        }

        .ivu-form-item-content {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          // select选中样式
          .ivu-select .ivu-select-dropdown-list .ivu-select-item:hover {
            background: #57a3f3;
            color: #fff;
          }

          // input样式
          .ivu-input-wrapper {
            input[type='number']::-webkit-outer-spin-button,
            input[type='number']::-webkit-inner-spin-button {
              -webkit-appearance: none;
            }

            .ivu-input-prefix {
              border: 1px solid #99999a;
              border-radius: 4px 0 0 4px;
              width: 24px;
              line-height: 2.8;

              .hand-icon {
                display: inline-block;
                cursor: pointer;
              }
            }

            .ivu-input-suffix {
              border: 1px solid #99999a;
              border-radius: 0 4px 4px 0;
              width: 24px;
              line-height: 2.8;

              .hand-icon {
                display: inline-block;
                cursor: pointer;
              }
            }
          }

          .ivu-dropdown {
            width: 100%;
          }

          // 自定义上下键
          .handle-group {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            user-select: none;

            &.price-handle {
              width: 24px;
              height: 32px;
              border: 1px solid #99999a;
              border-left: none;
              position: relative;
              top: 1px;
              border-radius: 0 4px 4px 0;
            }

            .adjust {
              background-color: #b7cffb;
              cursor: pointer;
              flex: 1;

              &.up {
                background-image: url('./assets/img/option.png');
                background-repeat: no-repeat;
                background-position: 7px 4px;
              }

              &.down {
                background-image: url('./assets/img/option.png');
                background-repeat: no-repeat;
                background-position: 7px -12px;
              }

              &:hover {
                background-color: #ddeffd;
              }
            }
          }
        }
      }

      .el-button {
        border-color: #99999a;

        &:hover {
          border-color: #3d86cb;
        }
      }
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    // table 表格样式
    .dTable {
      border: none;
      width: 100%;
      height: 100%;
      position: relative;
      padding-top: 22px;
      white-space: nowrap;
      overflow-x: auto;

      thead {
        width: calc(100% - 1.4em);
        top: 0;
        height: 22px;
        left: 0;
        background: #fff;
        display: table;
        table-layout: fixed;
        font-size: 12px;
        font-weight: normal;
        text-align: left;

        tr {
          display: table;
          width: 100%;
          table-layout: fixed;

          th {
            text-align: center;
            border-right: 1px solid #b1bbc0;
            border-bottom: 1px solid #b1bbc0;
            padding: 0 2px;
            font-size: 12px;
            line-height: 22px;
            height: 22px;
            font-weight: normal;
            overflow: hidden;

            &:last-child {
              border-right: none;
            }
          }
        }
      }

      tbody {
        height: calc(100% - 22px);
        box-sizing: border-box;
        display: block;
        overflow-y: scroll;
        color: #000000;

        tr {
          display: table;
          width: 100%;
          table-layout: fixed;

          td {
            text-align: center;
            border: none;
            padding: 0 2px;
            font-size: 12px;
            line-height: 22px;
            height: 22px;
            font-weight: normal;
            overflow: hidden;

            .pricerise {
              color: #ff3c39;
            }

            .pricefall {
              color: #00e700;
            }
          }

          &.noneInfo {
            text-align: center;
            font-size: 12px;
            color: #808080;
            padding: 6px 0;
          }

          &.active {
            background-color: #0078d7;
            color: #fff;
          }

          &.statistics {
            td {
              line-height: 82px;
            }
          }
        }
      }

      .tobdy-box {
        height: calc(100% - 22px);
        width: 100%;
        overflow-y: scroll;

        tbody {
          height: auto;
          overflow: auto;
        }
      }
    }

    // tab 栏切换样式
    .tabs-header {
      height: 26px;
      display: flex;
      flex-wrap: nowrap;

      .tab {
        font-size: 14px;
        color: #464646;
        border: 1px solid #bbc3c5;
        position: relative;
        border-radius: 3px 3px 0px 0px;
        border-bottom: none;
        min-width: 44px;
        text-align: center;
        padding: 1px 3px 0px 3px;
        background: #ebebeb;
        cursor: pointer;

        &.active {
          background: #fff;
          padding: 0px 5px 0px 5px;
          border: 1px solid #bbc3c5;
          border-top: 2px solid #3d86cb;
          color: #0f0f0f;
          top: 1px;
          background-color: #fff;
          border-bottom: 1px solid #fff;
        }
      }

      .handle-group {
        flex: 1;
        display: flex;
        padding-left: 34px;
        font-size: 12px;
        line-height: 22px;
        padding-top: 2px;

        .label {
          margin-right: 6px;
        }

        .btn {
          border-radius: 3px;
          font-size: 12px;
          background: linear-gradient(to bottom, #fff 0%, #e0dedf 100%);
          cursor: pointer;
          color: #191a15;
          outline: none;
          padding: 1px 5px;
          border: 1px solid;
          margin-right: 5px;

          &.mt16 {
            margin-left: 16px;
          }
        }
      }
    }

    .tabs-content {
      flex: 1;

      .tabs-c {
        height: 100%;
        border: 1px solid #b1bbc0;
        border-right: 0;
        display: flex;
        flex-wrap: nowrap;
      }

      .tab-body {
        height: 100%;
        border: 1px solid #b1bbc0;
        border-right: 0;
      }
    }
  }

  // 通知自定义样式
  .el-notification {
    .el-notification__content {
      .trade-notifica {
        font-size: 12px;
        width: 150%;
        position: relative;
        left: -26px;
        line-height: 2;
        padding: 14px 0;

        > div {
          display: flex;

          > span {
            flex: 1;
          }
        }
      }
    }
  }

  // 止盈止损列表
  .ivu-table-wrapper {
    border: 0!important;
    .ivu-table::before, .ivu-table::after{
        content: none;
    }
    .ivu-table th{
        font-size: 13px;
        background-color: #ffffff!important;
        color: #000000!important;
        border-bottom-color: #cccccc;
			  font-weight: normal;
    }
    .ivu-table td{
        border: 0!important;
        font-size: 12px!important;
        // color: #8D8D8D!important;
    }
  }
	
	// 系统消息
	.windowNews {
		.el-dialog__body {
        height: 60vh;
        display: flex;
        align-items: center;
        padding-top: 0;
			}
			border-radius: 5px;
			overflow: hidden;
			.wraper{
				background: #ffffff;
				overflow: hidden;
			.box{
				margin-top: 0;
				margin-bottom: 0;
				border: 0;
				h1 {
					color: #409EFF;
				}
				.content {
					color: #000000;
          padding: 0 30px;
          max-height: 290px;
          overflow-y: scroll;          
        }
        
			}
		}
	}
}
